<template>
   <div class="container" v-loading="loading">
       <div class="header">
         <van-nav-bar
             title="报名人员信息查看"
             left-text="返回"
             right-text=" "
             left-arrow
             @click-left="onClickLeft"
             @click-right="onClickRight">
           <template #right>
             <van-dropdown-menu active-color="#409eff" class="search-menu">
               <van-dropdown-item title="搜索" ref="item">
                 <van-form>
                   <van-field
                       v-model="searchForm.username"
                       name="姓名"
                       label="姓名"
                       placeholder="姓名"
                   />
                   <van-field
                       v-model="searchForm.cellPhone"
                       name="手机"
                       label="手机"
                       placeholder="手机"
                   />
                   <van-field
                       v-model="searchForm.inviteCode"
                       name="邀请码"
                       label="邀请码"
                       placeholder="邀请码"
                   />

                 </van-form>
                 <div class="search-box">
                   <van-button type="default"   @click="resetSearchForm">
                     清空
                   </van-button>
                   <van-button type="info"   @click="onConfirmSearch">
                     确认
                   </van-button>
                 </div>
               </van-dropdown-item>
             </van-dropdown-menu>
           </template>
         </van-nav-bar>

       </div>

      <div class="pd-l-r-10 scroll">
       <template v-if="dataList.length > 0 " v-for="(item,index) in dataList">
        <div class="flex-v-center">
          {{(page.currentPage - 1) * page.pageSize + index + 1}}
          <van-contact-card
              type="edit"
              :name="item.username"
              :tel="item.cellPhone"
              @click="onEdit(item)"
          />
        </div>
       </template>
        <van-empty v-if="dataList.length == 0 " description="暂无数据" />
     </div>

<!--     人员详情-->
     <van-dialog v-model="show" title="人员信息详情" show-cancel-button  :showConfirmButton="false">
       <van-form>
         <van-field
             readonly
             v-model="formData.username"
             name="姓名"
             label="姓名"
             placeholder="姓名"
         />

         <van-field
             readonly
             v-model="formData.sex"
             name="性别"
             label="性别"
             placeholder="性别"
         />

         <van-field
             readonly
             v-model="formData.age"
             name="年龄"
             label="年龄"
             placeholder="年龄"
         />

         <van-field
             readonly
             v-model="formData.cellPhone"
             name="手机"
             label="手机"
             placeholder="手机"
         />

         <van-field
             readonly
             clickable
             name="picker"
             v-model="formData.degree"
             label="学历"
             placeholder="学历"
         />

       </van-form>
     </van-dialog>

<!--     到处-->
     <div class="send-info" @click="download"> <van-icon name="down" size="18" /></div>

<!--     分页-->
     <div class="fixed-bottom">
       <van-pagination
           v-model="page.currentPage"
           :total-items="page.total"
           :show-page-size="3"
           force-ellipses
       />
     </div>
   </div>
</template>

<script>
import {request} from "@/assets/js/utils/request";
import {Dialog, Toast} from "vant";
import axios from "axios";
export default {
  name: "index",
  data(){
    return{
      loading:false,
      show:false,
      page:{
        currentPage:1,
        pageSize:10,
        total:0,
      },
      dataList:[],
      formData:{},
      searchForm:{}
    }
  },
  created(){
    this.getDataList()
  },
  methods:{
    onClickLeft(){
      this.$router.push('/home')
    },
    getDataList(){
      this.loading = true ;
      request('rest/cdweb2/list',
          "get",Object.assign({pageNum:this.page.currentPage,pageSize:this.page.pageSize,token:'11111'},this.searchForm)
      ).then(res=> {
        this.dataList = res.rows
        this.page.currentPage = res.pageNo
        this.page.total = res.total
        this.loading = false ;
      }).catch(err=>{
        this.loading = false ;
      })

    },
    onEdit(item){
      this.show = true ;
      this.formData = item
      if (item.gender == 0){
        this.formData.sex = '男'
      }else if (item.gender == 1){
        this.formData.sex = '女'
      }else{
        this.formData.sex = '保密'
      }
      console.log("item:",item)
    },
    onClickRight(){
      console.log("*********")
    },
    resetSearchForm(){
      this.searchForm = {} ;
    },
    onConfirmSearch(){
      this.getDataList() ;
      this.$refs.item.toggle();
    },
    download(){
      Dialog.confirm({
        title: '提示',
        message:
            '是否导出人员信息？',
      })
          .then(() => {
            this.loading = true ;

            axios({
              url:'rest/cdweb2/export',
              method:'post',
              // headers:{
              //   // application/msword 表示要处理为word格式
              //   'Content-Type': ' application/vnd.ms-excel ' //表示要处理为excel格式
              //     //  'Content-Type': 'application/json; charset=UTF-8',
              // },
              headers: {
                //"Content-Type": "multipart/form-data",
                dataType: "file"
              },
              responseType: 'arraybuffer',  // 这一行必须要加，不然文件就打不开
            }).then(res=>{
              console.log("res:",res)
              // res 就是后端返回的流
              // application/msword 表示要处理为word格式
              let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=UTF-8'}); //即可转为excel格式
              //let blob = new Blob([res], { type: 'application/msword;charset=UTF-8' });
              const link = document.createElement('a');
              link.download = '人员信息.xlsx'; //定义表格名称，后缀是文件格式
              link.style.display = 'none';
              //const blob = new Blob([接收的blob对象], { type: 'text/csv,charset=UTF-8'});
              link.href = URL.createObjectURL(blob);
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              this.loading = false ;
            }).catch(err=>{
              Toast.fail('导出失败');
              this.loading = false ;
            })
          })
    }
  }
}
</script>

<style scoped>
.container{padding-top: 46px;padding-bottom: 60px;width: 100%;overflow: hidden}
.header{position: fixed;left: 0;top:0;width: 100%;z-index: 999}
.fixed-bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  width:100%;
  padding: 10px 0;
}
.scroll{height: calc(100vh - 130px);overflow-y: auto;width: 100%}
.pd-l-r-10{padding: 0 10px}
.flex-v-center{display: flex;align-items: center}
.down-mg-right{display: inline-block;margin-right: 10px}
.search-menu /deep/.van-dropdown-menu__bar{box-shadow: none}
.search-menu /deep/.van-dropdown-item{z-index: 999999}
.search-menu /deep/.van-dropdown-menu__title{color:#1989fa}
.search-box{    width: 100%;
  text-align: center;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;}
.search-box button{margin: 0 10px}
.send-info{
  animation-name: imgInOut; /* 指定要应用的动画名称 */
  animation-duration: 3s; /* 设置动画持续时间（单位为秒）*/
  animation-iteration-count: infinite; /* 无限次重复动画 */
  animation-direction: alternate; /* 交替反向运行动画 */
  display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 25px;
  position: fixed;
  bottom:30px;
  right: 30px;
  background: rgba(255, 255, 255,.8);
  border-radius: 50%;
  height: 60px;
  width: 60px;
  box-shadow: 0 0 6px rgba(64,158,255,.12);
  z-index: 999;
  color:rgb(64,158,255);
  cursor: pointer;
  font-size: 18px;
}
.send-info span{font-size: 12px}
</style>